/* eslint-disable vue/no-multiple-template-root */
<template>
  <div class="carouselitem-container">
    <div class="carousel-image">
      <IndexImage
        src="http://mdrs.yuanjin.tech/img/20201031141350.jpg"
        placeholder="http://mdrs.yuanjin.tech/img/20201031141507.jpg"
      />
    </div>
    <div class="title">凛冬将至</div>
    <div class="des">人唯有恐惧的时候方能勇敢</div>
  </div>
</template>

<script>
import IndexImage from "@/components/ImageLoder/IndexImage.vue";
export default {
  components: {
    IndexImage,
  },
};
</script>

<style scoped lang="less">
@import "~@/style/var.less";
.carouselitem-container {
  width: 100%;
  height: 100%;
  //background: @dark;
  color: white;
  position: relative;
  overflow: hidden;
}

.carousel-image {
  width: 110%;
  height: 110%;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.3s;
}
.title,
.des {
  color: white;
  position: absolute;
  top: 50%;
  left: 30px;
  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), -1px 0 0 rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: 3px;
}
.title {
  top: calc(50% - 40px);
  font-size: 2em;
}
.des {
  font-size: 1.2em;
  position: absolute;
  top: calc(50% + 20px);
}
</style>